<!--  -->
<template>
  <div class="home">
    <van-nav-bar title="精选" left-arrow fixed>
      <template #left>
        <van-icon name="location-o" size="12" @click="$router.push('/dingweichengshi')"/>{{city}}
      </template>
      <template #right>
        <van-icon name="search" size="18" @click="$router.push('/sreach')"/>
      </template>
    </van-nav-bar>
   <main class="jjgd content" @scroll="gdsj" ref="zya">
       
       <div class="item" v-for="item in cpdata1" :key="item.id" :id="item.id" @click="txq(item.id)">
          
           <img v-lazy="item.cover" alt="">
           <div class="buttom">
               <h3>{{item.name}}</h3>
               <span>{{item.price | hhh}} </span>
           </div>
       </div>
       <div class="hudt" v-show="show" @click="hudb"> 
      
        <van-icon name="upgrade" size="50"  ></van-icon>
       </div>
    
       
    </main>
   
   
  </div>
</template>


<script>
import { getluyou } from 'network/api.js'
import { mapState } from "vuex";
export default {
  name: "home",
  
  data() {
    return {
        active:0,
        cpdata:[],
        cpdata1:[],
        pape:1,
        totalPages:'',
        jzbj:false,
        show:false,
        id:"",
        lsgdgd:0,
    };
  },

  computed: {
      ...mapState(["city"])
  },

  methods: {
      async getsj(){
          const hh1=await getluyou(this.pape)
          this.cpdata=hh1.data.data
          this.totalPages=hh1.data.totalPages
          this.cpdata1=[...this.cpdata1,...this.cpdata]
         this.jzbj=false
      },
   

    gdsj(){
       if(this.$refs.zya.scrollTop>=1500){
           this.show=true
       }else{
           this.show=false
       }
        if(this.$refs.zya.scrollHeight-this.$refs.zya.scrollTop<=this.$refs.zya.offsetHeight+3){
            
            if(this.jzbj){
               return
            }
            this.jzbj=true
             this.pape++
            if(this.pape>this.totalPages){
                this.$toast('没有更多了');
                return
            }else{
                
                this.getsj()
            }
            
        }
    },
    hudb(){
        var b=this.$refs.zya.scrollTop
        var a=setInterval(_=>{
            this.$refs.zya.scrollTop-=b/3
            if(this.$refs.zya.scrollTop==0){
                clearInterval(a)
            }
        },300)
       
    },
    txq(ccc){
        this.$router.push({
            path:"/delet",
            query:{id:ccc}
        })
    }
  },
  destroyed(){
      console.log(2222)
  },
  activated(){
      console.log(this.lsgdgd)
      this.$refs.zya.scrollTop=this.lsgdgd
     
  },
   beforeRouteLeave(to, from, next) {
          this.lsgdgd=this.$refs.zya.scrollTop
          next()
  },
  created(){
      this.getsj()
     
  }
};
</script>
<style scoped lang="less">
    .content{
     
        display: flex;
        flex-flow: wrap;
        
        justify-content: space-between;
        .item{
            width:45vw;
            // height: 230px;
            padding: 2px;
            border: 1px solid #d1d1d1;
            margin:10px 5px 0px 5px; 
            border-radius: 5px;
            box-shadow: 1px 2px 2px 1px rgba(0,0,0, .3);
            img{
                width: 100%;
                
            }
            .buttom{
                padding: 0 10px;
                 h3{
                white-space: nowrap;
                overflow-x:hidden ;
                text-overflow: ellipsis;
                margin-bottom:10px ;
            }
            span{
                color:#ff681d;
            }
            }
           
        }
        .hudt{
           
            z-index: 999999;
            position: fixed;
            bottom:150px;
            right: 50px;
        }
    }
    
</style>